<template>
    <div class="dropdown-box">
        <input type="text" v-model="inputValue" class="input" @input="inputValueChange">
        <div class="drop-box" v-show="showDropBox">
            <div 
            v-for="(item, idx) in dataSource" 
            :key="item" 
            class="drop-item"
            :class="[hoverIndex === idx ? 'hoverClass' : '']"
            @mouseover="hoverIndex = idx"
            @click="selectItem(idx)"
            >{{item}}</div>
        </div>
    </div>
</template>

<script setup>
import {ref, reactive, defineProps} from "vue";

const props = defineProps({
    dropdownDataSource: Array,
    type: String
})

let inputValue = ref("");
let showDropBox = ref(false);
let hoverIndex = ref(0);
let dataSource = reactive(props.dropdownDataSource);
//methods
const inputValueChange = e => {
    if (inputValue.value.length > 0) {
        dataSource = dataSource.filter(el => el.includes(inputValue));
        showDropBox.value = true;
    } else {
        showDropBox.value = false;
    }
} 

const selectItem = i => {
    inputValue.value = props.dropdownDataSource[i];
    showDropBox.value = false;
}


</script>

<style scoped>
.dropdown-box {
    width: 100%;
}

.dropdown-box>input {
    height: 1.5em;
    font-size: 16px;
    width: 100%;
}


.drop-box {
    width: 100%;
    background-color: #fff;
}

.drop-item {
    height: 2em;
    line-height: 2em;
}

.hoverClass {
    color: #fff;
    background-color: #ccc;
}

</style>
